<template>
  <el-dialog v-model="dialogVisible" :title="diaTitle" width="600" destroy-on-close>
    <!-- 输入框 -->
    <el-form class="form-hight" ref="ruleFormRef" :model="ruleForm" :rules="rules" style="max-width: 600px"
      label-width="100" :label-position="labelPosition" :size="size">
      <el-form-item label="上级分类">
        {{ ruleForm }}
        <el-select v-model="ruleForm.parentId">
          <el-option label="顶级分类" :value="0"></el-option>
          <el-option v-for="item in classifyData" :value="item._id" :label="item.name" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称:" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入配送员名称" />
      </el-form-item>

      <el-form-item label="分类图标(180*180):" prop="">
        <el-upload class="avatar-uploader" action="http://nocat.life:3011/images/upload" :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img v-if="ruleForm.icon" :src="ruleForm.icon" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <PictureFilled />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="分类大图(468*340):" prop="">
        <el-upload class="avatar-uploader" action="http://nocat.life:3011/images/upload" :show-file-list="false"
          :on-success="handleImageSuccess">
          <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <PictureFilled />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="ruleForm.sort" />
      </el-form-item>
      <el-form-item label="状态:" prop="state">
        <!-- 单选框 -->
        <el-radio-group v-model="ruleForm.state">
          <el-radio :value="1">显示</el-radio>
          <el-radio :value="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handOk">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import { ref, reactive, watch, onMounted } from 'vue'
import type { FormRules } from 'element-plus'
import api from '../../../api';
import { ElMessage } from 'element-plus'
import type { ComponentSize, FormProps } from 'element-plus'
import { PictureFilled } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { useFetchData } from '@/hooks/fetchData';
const imageUrl = ref('')
const labelPosition = ref<FormProps['labelPosition']>('right')
const size = ref<ComponentSize>('default')
// 接受父组件数据
const { ruleForm } = defineProps(["ruleForm"])
const dialogVisible = defineModel();
interface RuleForm {
  name: string,
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
) => {
  ruleForm.icon = response.data
}
const handleImageSuccess: UploadProps['onSuccess'] = (
  response,
) => {
  ruleForm.image = response.data
}
// 组合式函数
const { getClassifyDataAsync, classifyData } = useFetchData();
onMounted(() => {
  getClassifyDataAsync();
})
// 接受父组件的函数
const emit = defineEmits(["getClassifyData"])

// 表单验证接口

// 操作新增和删除
const handOk = () => {
  if (!ruleForm._id) {
    addCourier()
  } else {
    updateCourier()
  }

}
//点击确认添加商品分类
const addCourier = async () => {
  const addItme = { ...ruleForm }
  delete addItme._id
  const res = await api.goodsClassifies.add(addItme)
  if (res.code == 200) {
    // console.log(res);
    ElMessage({
      message: '商品分类添加成功',
      type: 'success',
    })
    emit("getClassifyData")
    dialogVisible.value = false
  } else {
    ElMessage.error(res.message)
  }
}
// 修改配送员信息
const updateCourier = async () => {
  const res = await api.goodsClassifies.update({ ...ruleForm })
  if (res.code == 200) {
    ElMessage({
      message: '分类修改成功',
      type: 'success',
    })
    emit("getClassifyData")
    dialogVisible.value = false
  } else {
    ElMessage.error(res.message)
  }
}

const diaTitle = ref("")
//弹窗标题的变化
watch(() => ruleForm._id, () => {
  if (ruleForm._id) {
    diaTitle.value = "修改分类"
    // 渲染需要修改的头像
    imageUrl.value = ruleForm.avatar
  } else {
    // console.log(imageUrl.value);
    imageUrl.value = ''
    diaTitle.value = "添加分类"
  }
}, {
  immediate: true
})
// 定义表单的验证规则
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入商品类型', trigger: 'blur' },
  ],
})

</script>
<style scoped>
.avatar-uploader .avatar {
  width:80px;
  height:80px;
  display: block;
}
</style>
<style>
.form-hight{
  .el-form-item--default .el-form-item__label {
    height: 47px
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width:80px;
  height:80px;
  text-align: center;
}
</style>

<style lang="scss">

</style>